<!-- 学社 - 学社主页 - 动态组件 -->
<template>
  <view class="px-4">
    <!-- 顶部信息 -->
    <view class="flex h-80 mt-4">
      <u-image class="flex-shrink-0" shape="circle" width="80" height="80" :src="data.avatar"
        @click="toHomePage(data.user_id)"></u-image>
      <view class="flex-1 flex flex-col justify-between mx-3 h-76 text-single">
        <view class="flex items-center">
          <view class="c-#333 text-32 text-single mr-1 " @click="toHomePage(data.user_id)">{{ data?.nickname }}</view>
          <view v-if="data.member_position > 0" class="flex-shrink-0 tag-identity mr-2">{{ identity }}</view>
          <image v-if="data.vip_level > 0" mode="aspectFit"
            :class="['flex-shrink-0', data.vip_level > 1 ? 'w-140 h-40' : 'w-112 h-28']"
            :src="`/static/images/user/ic_vip_tag_${vipIcon}.png`" />
        </view>
        <view class="c-#999 text-24">{{ data?.createtime }}</view>
      </view>
      <!-- 社长管理员才能操作 -->
      <view v-if="member_position >= 2" class="flex-shrink-0 flex justify-end">
        <view class="btn-top" @click="onTopSwitch(data.id, data.is_top)">{{ data.is_top ? '取消置顶' : '置顶' }}</view>
      </view>
    </view>
    <!-- 文字内容 -->
    <view class="my-3">
      <!-- <view @click="navigate(`/package_society/pages/trend/detail?id=${data.id}`)">
        <view class="trend-text max-h-400 text-lines-10 c-#666 text-sm">{{ data?.content }}</view>
        <view class="c-#EA9D50 text-28 my-1">查看全文</view>
      </view> -->
      <u-read-more show-height="400" color="#EA9D50" close-text="查看全文" open-text="收起" text-indent="0"
        :shadow-style="shadowStyle" @close="navigate(`/package_society/pages/trend/detail?id=${data.id}`)">
        <view>
          <view class="c-#666 text-sm" @click="navigate(`/package_society/pages/trend/detail?id=${data.id}`)">
            <!-- @信息 -->
            <view v-if="data.is_read" class="relative inline-block c-#FF513A mr-2 text-sm font-bold">
              提到我
              <u-badge :is-dot="true" :offset="[-8, -8]" type="error"></u-badge>
            </view>
            <view class="mt-3 inline-block">
              <text v-for="(item, index) in data.at_info" :key="index" class="c-#F4AF22 mr-2 text-sm"
                @click="toHomePage(item.id)">@{{ item.nickname }}</text>
              <text>{{ data?.remark }}</text>
            </view>
            {{ data?.content }}
          </view>
          <!-- <view class="c-#EA9D50 text-28 my-1">查看全文</view> -->
        </view>
      </u-read-more>
    </view>
    <!-- 图片内容 -->
    <view>
      <view class="grid grid-cols-3 mt-1 grid-gap-2">
        <u-image v-for="(item, index) in data.slideshow" :key="index" width="218" height="144"
          border-radius="10" :src="item" @click="previewImage(data.slideshow, index)"></u-image>
      </view>
    </view>
    <!-- TODO:视频内容 目前与产品确认后暂时不做 -->
    <!-- <view>
      <video class="w-full h-386"
        src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
        controls></video>
    </view> -->
    <!-- 评论/点赞 -->
    <view class="flex justify-end items-center c-#999 text-24 mt-3">
      <view class="flex items-center" @click="navigate(`/package_society/pages/trend/detail?id=${data.id}`)">
        <u-image width="38" height="34" src="/static/images/home/ic_trend_comment.png"></u-image>
        <view class="ml-1">{{ data?.comment_num }}</view>
      </view>
      <view class="flex items-center ml-3">
        <image class="w-42 h-36" @click="onLikeSwitch(data.id, data.is_like)"
          :src="`/static/images/home/ic_trend_${data.is_like ? 'like' : 'nolike'}.jpg`"></image>
        <view class="ml-1">{{ data?.like_num }}</view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { navigate, showToast, previewImage } from "@/common/util/uni";
import { toHomePage } from "@/common/util/util";
import { societyIdentity, vipLevels } from '@/common/constant/society.js'
import { postDynamicSetTop, postDynamicGiveLike, postDynamicCancelLike } from '@/common/http/module/society.js'

const emit = defineEmits(['refresh'])
const props = defineProps({
  data: Object,
  member_position: [String, Number], // 用户在该学社身份
})

const shadowStyle = {
  backgroundImage: "none",
}

// 身份&会员标签
const vipIcon = computed(() => vipLevels.find(v => v.value == props.data.vip_level)?.icon)
const identity = computed(() => societyIdentity.find(v => v.value == props.data.member_position)?.label)

// 动态图片切割
// function formatImgs(imgList) {
//   return imgList && imgList.slice(0, 3)
// }

// 是否置顶
function onTopSwitch(dynamic_id, is_top) {
  postDynamicSetTop({
    dynamic_id,
    action: is_top ? 'cancel' : 'top'
  }).then(() => {
    showToast(`${is_top ? '取消置顶' : '置顶'}成功`)
    emit('refresh')
  })
}

// 点赞
function onLikeSwitch(dynamic_id, is_like) {
  const postMethods = is_like ? postDynamicCancelLike : postDynamicGiveLike
  postMethods({ dynamic_id }).then(() => {
    showToast(`${is_like ? '取消点赞' : '点赞'}成功`)
    emit('refresh')
  })
}
</script>

<style lang="scss" scoped>
:deep(.u-content) {
  margin-bottom: 20rpx;
}

:deep(.u-content__showmore-wrap) {
  margin-top: 20rpx;
  justify-content: flex-start !important;
}

:deep(.u-content__showmore-wrap__readmore-btn__icon) {
  display: none !important;
}

.tag-identity {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rpx 6rpx;
  border-radius: 4rpx;
  background-color: #F4AF22;
  color: #FFFFFF;
  font-size: 20rpx;
}

.btn-top {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6rpx 20rpx;
  height: 48rpx;
  border-radius: 12rpx;
  background: linear-gradient(-180deg, rgba(248, 220, 97, 1) 0%, rgba(244, 174, 32, 1) 100%);
  color: #FFFFFF;
  font-size: 28rpx;
}
</style>

